import * as echarts from 'echarts';
import { onMounted, watch, computed, watchEffect } from 'vue';

const formatData = (data: any) => {
  const arr: any = [];
  const legend: any = [];
  Object.keys(data).forEach((key: any) => {
    legend.push(`${key}(${data[key]})`);
    arr.push({ value: data[key], name: `${key}(${data[key]})` });
  });
  return {
    legend: legend,
    data: arr,
  };
};
const Comp = (props: any) => {
  const { id, data, key } = props;
  watchEffect(
    () => {
      const myChart = echarts.init(document.getElementById(id) as any);
      const _data = data[key];
      if (_data) {
        const option: any = {
          grid: {
            left: 50,
            top: 50,
            bottom: 30,
            right: 50,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          xAxis: [
            {
              type: 'category',
              data: _data.xaxisList,
              axisPointer: {
                type: 'shadow',
              },
              axisLabel: {
                color: '#ffffff',
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: _data.yaxisList[0].name,
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                color: '#ffffff',
              },
              splitLine: {
                lineStyle: {
                  color: '#215570',
                },
              },
              axisLine: {
                show: true,
              },
            },
            {
              type: 'value',
              name: _data.yaxisList[1].name,
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                color: '#ffffff',
              },
              splitLine: {
                lineStyle: {
                  color: '#215570',
                },
              },
              axisLine: {
                show: true,
              },
            },
          ],
          series: [
            {
              name:  _data.yaxisList[0].name,
              type: 'bar',
              tooltip: {},
              data:  _data.yaxisList[0].data,
            },
            {
              name: _data.yaxisList[1].name,
              type: 'line',
              yAxisIndex: 1,
              tooltip: {},
              data:  _data.yaxisList[1].data,
            },
          ],
        };
        myChart.setOption(option);
      }
      
      window.addEventListener('resize', () => {
        myChart?.resize();
      });
    },
    {
      flush: 'post',
    },
  );
};

export default Comp;
